<template>
  <div class="remenbig">
    <!-- 头部 -->
    <div class="lunbotubigtop2">
      <!-- <van-nav-bar

  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
  class="narbar"
/> -->
<van-nav-bar class="narbar" left-text="返回"  @click-left="onClickLeft" left-arrow>
  <template #right>
    <van-icon name="search" size="22"  @click="onClickright"/>
  </template>
</van-nav-bar>
    </div>
    <!-- 中部头像 -->
    <div class="lunbotubigcecer2">
      <div class="lunbotubigcecertop">
        <!-- 头像及关注 -->
        <div class="touxiangleft">
          <!-- 头像 -->
          <div class="touxianglefttop">
            <van-image
            round
            width="100%"
            height="100%"
            :src="require('../assets/787857fe8f39483748cce639f9f93f2.jpg')"
/>
          </div>
<!-- 点击关注 -->
<div class="weiweiguanz">
  <button v-if="showButton1"  @click="toggleButtonsone" class="btnguanzhu">+关注</button>
  <button v-else class="btnguanzhu"  @click="toggleButtonstwo">✔已关注</button>

</div>

        </div>
        <!-- 用户相互信息 -->

      </div>
      <div  class="lunbotubigcecerconert">黄桥官方</div>
      <div class="lunbotubigcecerbom">发布时间:</div>
<div class="lunbotubigcecermom"> 2022-11-03</div>
<!-- 在招租详情右侧的单架 -->
<div class="zhaozhudanjia">80万/亩</div>

    </div>
    <!-- 内容资料 -->
    <div class="wenzizhaozudata">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>
 <img src="../assets/12e0ca76ef09dd27ee1540011d398b1.png" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../assets/9af5438e1e6a9c43189de4f59d3c409.png" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../assets/a0e1f9ebd60599dfab9b9dc71531d4b.png" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../assets/c4ee81bc3a842b99161f3b00cbcf147.png" alt="">
  </van-swipe-item>
</van-swipe>
<div class="remenone">
    <div class="remenonetop">概述简介:</div>
    <div  class="remenonebom">
      <p>未来工场项目位于苏州市相城区黄桥街道绣谷路1008号，项目占地16.4亩，总体规划5万平方米，共有地上10层和地下1层，其中1-6层为工业加速器，7-10层为研发办公和配套空间。项目立足相城区“五大功能片区”充分把握人工智能、航空航天等片区功能，积极搭建创新平台载体，促进产业转型升级，将来打造成航空航天产业园，为街道新一代电子信息、工业设计、先进材料、卫星导航服务等高端产业提供科技孵化、研发制造、产业加速器等功能的载体，进一步整合和强孵化战略性新兴产业资源配给优势，形成相城区战略性新兴产业新示范标地</p>
    </div>

</div>
<div class="rementwo">
    <div class="rementwotop">项目描述:</div>
    <div class="rementwobom">
        <p>产业园总占地面积约48.6亩，总建筑面积约17万平方米。由A #、B # 、C # 、D #和地下车库构成,每栋的面积如下:A# ——4万平方米;B# ——3万平方米;C# ——4.5万平方米;D# ——0.64万平方米
企业生态的研发方面处于研发阶段,可获资金、政策、咨询、财税、法律的支持,办公工位、独立办公室、实验室等;产业化方面处于高速成长期，需快速扩张需要更大的生产空间和更多的专业服务,为街道新一代电子信息、工业设计、先进材料、卫星导航服务等高端产业提供科技孵化、研发制造、产业加速器等功能的载体，进一步整合和强孵化战略性新兴产业资源配给优势，形成相城区战略性新兴产业新示范标地</p>
    </div>
</div>

    </div>
    <!-- 底部 -->
    <div class="bigdibucard2">
      <!-- 底部转发栏 -->
      <div class="zhuanfalancard">
        <div class="zhuanfalancardone">
          <van-image
          @click="showShare = true"
  width="85%"
  height="85%"
  :src="require('../assets/23d7e91499ffbf485f115654d804020.png')"
/>
<!-- 转发显示面板 -->
<van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
        </div>
        <div class="zhuanfalancardone">
          <van-image
          @click="pinlunbtn"
  width="100%"
  height="85%"
  :src="require('../assets/f25243194a2d41a4332ed10f984dbb5.png')"
/>
        </div>
        <div class="zhuanfalancardone">
          <van-image
          @click="dianzanbtn"
  width="150%"
  height="100%"
  :src="require('../assets/082572579bce931a2e259b705273d54.png')"
/>
        </div>
      </div>
      <!-- 底部收藏栏 -->
      <div class="lunbotubigbom">
        <!-- 收藏 -->
      <div class="lunbotubigbomone">
        <van-image
        @click="shouchangbtn"
  width="99%"
  height="100%"
  :src="require('../assets/16ebfd425ebc7a67a1a239e1293b070.png')"
/>
      </div>
      <!-- 电话 -->
      <div class="lunbotubigbomone">
        <van-image
        @click="showPopup"
  width="100%"
  height="100%"
  :src="require('../assets/4a99b14c9c505290697ecf0921fd5b2.png')"
/>
<van-popup v-model="show"  position="bottom" :style="{ height: '8%' }">相关电话:0421-28635</van-popup>
      </div>
      <!-- 咨询 -->
      <div class="lunbotubigbomone">
        <van-image
@click="pinlunbtn"
  width="100%"
  height="100%"
  :src="require('../assets/aec9fbc633271548b849d5530260486.png')"
/>
      </div>
    </div>
    </div>

  </div>
</template>
<script>
import { Toast, Dialog } from 'vant'
export default {
  name: '',
  data () {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      show: false,
      showButton1: true // 初始状态为显示按钮1
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/shouye')
    },
    onClickright () {
      Toast('正在开发中~~')
    },
    // 收藏成功
    shouchangbtn () {
      Toast.success('收藏成功')
    },
    dianzanbtn () {
      Toast.success('点赞成功')
    },
    // 分享面板属性
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    },
    // 评论
    pinlunbtn () {
      Dialog.alert({
        message: '功能正在开发中~~'
      }).then(() => {
        // on close
      })
    },
    // 电话
    showPopup () {
      this.show = true
    },
    toggleButtonstwo () {
      this.showButton1 = true
      Toast.fail('已取消关注')
    },
    // 点击关注
    toggleButtonsone () {
      this.showButton1 = false
      Toast.success('已关注')
    }
  }
}
</script>
<style lang="less">
*{
  margin: 0;
  padding: 0;
  border-top:1px solid transparent

}
.my-swipe .van-swipe-item {
    color: #39a9ed;
    font-size: 20px;
    // line-height: 180px;
    text-align: center;
    // background-color: #39a9ed;
  }
.remenbig{
    width: 100%;
    height: 150vh;

}
.lunbotubigtop2{
    width: 100%;
    height: 35px;

 top: 0;
 position: fixed;
//  margin-bottom: 120px;
.narbar{
  // border: 1px solid #29a8e3;
  background-color: rgb(219, 218, 218);
}
  }
  .lunbotubigcecer2{
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    .lunbotubigcecertop{
display: flex;
      width: 100%;
      height: 70px;
      line-height: 80px ;
      // background-color: #ccc;
      margin-bottom: 20px;
      padding-left: 10px;
.touxiangleft{
  width: 60px;
  height: 50px;
  // background-color: pink;

  .touxianglefttop{
    // margin-bottom: 10px;
    margin-top: 10px;
    width: 48px;
    height: 48px;
    // background-color:pink;
    border:2px;
    border-radius: 100%;
    // border:1px soild #888888;
    box-shadow: 5px 5px 5px #343434;
  }
   // btn
  .btnguanzhu{
      width: 65px;
      height: 25px;
      background-color:  #29a8e3;
      line-height: 25px;
      // z-index: 999;
    border-radius: 10px;
    margin-left: -15px;
    // m-left: 10px;
color:#fff;
border: 1px soild #29a8e3
    }

}
    }
// 右侧资料
.lunbotubigcecerconert{
  width: 80px;
  height: 20px;
  // background-color: pink;
  top: 70px;
  left: 80px;
  position: absolute;
  font-size: 16px;
  color: #29a8e3;
}
.lunbotubigcecerbom{
  width: 80px;
  height: 20px;
  // background-color: pink;
  top: 100px;
  left: 80px;
  position: absolute;
  font-size: 14px;
  color: rgb(123, 122, 122);
}
.lunbotubigcecermom{
  width: 90px;
  height: 30px;
  // background-color: pink;
  top: 130px;
  left: 85px;
  position: absolute;
  font-size: 16px;
  color:rgb(123, 122, 122);
}
// 招租价格表
.zhaozhudanjia{
  width: 90px;
  height: 50px;
  background-color: #fff;
  top: 80px;
  right: 10px;
  position: absolute;
  font-size: 24px;
  color:red
}

  }
  .wenzizhaozudata{
    width: 100%;
    height: 180px;
    // background-color: pink;
    img{
        width: 100%;
        height: 180px;
    }
}
.remenone{
    width: 100%;
    // background-color:pink;
    padding-left: -15px;
    .remenonetop{
        left: -10;
        position: absolute;
        margin-bottom: 20px;
    padding-left: 10px;
        // background-color: red;
        color: #29a8e3;
        font-size: 18px;

    }
    .remenonebom{
     padding-left: 8px;

        margin-top: 30px;
        background-color:#e1effc;
        font-size: 14px;
        color: #000;
    }

}
.rementwo{
    width: 100%;
    // background-color:pink;
    padding-left: -15px;
    margin-top: 10px;
    .rementwotop{
        left: -10;
        position: absolute;
        margin-bottom: 20px;
    padding-left: 10px;
        // background-color: red;
        color: #29a8e3;
        font-size: 18px;

    }
    .rementwobom{
width: 100%;
margin-top: 30px;
background-color: #e1effc;

    }
   }
   //底部功能栏
  .bigdibucard2{
    width: 100%;
    position: fixed;
    height: 120px;
bottom: 0 !important;
background-color:#fff;
margin-top: 30px !important;
.zhuanfalancard{
  width: 100%;
  height: 30px;
  // background-color: pink;
// border-top: 1px solid #ccc;
margin-bottom: 30px;
display: flex;
.zhuanfalancardone{
  width: 50px;
  height: 50px;
  // background-color: #fff;
  padding: 0 15px;
  margin: 0 20px;
}
}
    .lunbotubigbom{
    display: flex;
width: 75%;
height: 45px;
line-height: 45px;
margin-left: 12%;

// background-color:#29a8e3;
border-radius: 10px;
margin-bottom: 10px;
border: 1px solid #29a8e3;
box-shadow: 5px 5px 5px #888888;
// justify-content: center;
// text-align: center;
.lunbotubigbomone{
    width: 40px;
    height: 35px;
    line-height: 35px;
    // background-color:pink;
    padding: 0 20px;
    margin: 3px 10px;

  }
  }
  }
</style>
